<template>
  <div>
    <a-card class="card">
      <a-form layout="horizontal">
        <div :class="advanced ? null : 'fold'">
          <a-row>
            <a-col :md="8" :sm="24">
              <a-form-item
                label="字典类型"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-input
                  v-model="queryParams.entity.dictType"
                  placeholder="请输入"
                  onPressEnter="queryBtnClick"
                  allowClear=true
                />
              </a-form-item>
            </a-col>
            <span style="float: right; margin-top: 3px">
              <a-button type="primary" @click="queryBtnClick" style="margin-right: 20px">查询</a-button>
              <a-button type="primary" @click="queryBtnClick">新增</a-button>
            </span>
          </a-row>
        </div>
      </a-form>
    </a-card>
    <a-card class="card">
      <div>
        <standard-table
          :columns="columns"
          :dataSource="pageData.records"
          :rowKey="
            (record, index) => {
              return index;
            }
          "
          pagination="pagination"
        >
          <div slot="description" slot-scope="{ text }">
            {{ text }}
          </div>
          <div slot="action" slot-scope="{ record }">
            <router-link
              style="margin-right: 8px"
              :to="`/sysconfig/dict/edit/${record.id}`"
              ><a-icon type="edit" />编辑</router-link
            >
            <router-link
              style="margin-right: 8px"
              :to="`/sysconfig/dict/detail/${record.id}`"
              >详情</router-link
            >
          </div>
          <template slot="statusTitle">
            <a-icon @click.native="onStatusTitleClick" type="info-circle" />
          </template>
        </standard-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import StandardTable from "@/components/table/StandardTable";
import { dictPage } from "@/services/dict";

const columns = [
  {
    title: "ID",
    dataIndex: "id",
  },
  {
    title: "字典类型",
    dataIndex: "dictType",
  },
  {
    title: "字典类型名",
    dataIndex: "dictTypeName",
  },
  {
    title: "字典键值",
    dataIndex: "dictValue",
  },
  {
    title: "字典标签",
    dataIndex: "dictLabel",
  },
  {
    title: "是否可用",
    dataIndex: "enabled",
    customRender: (val) => (val ? "启用" : "停用"),
  },
  {
    title: "字典排序",
    dataIndex: "dictSort",
  },
  {
    title: "创建时间",
    dataIndex: "gmtCreate",
  },
  {
    title: "更新时间",
    dataIndex: "gmtModified",
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  name: "QueryList",
  components: { StandardTable },
  data() {
    return {
      advanced: true,
      columns: columns,
      pageData: { current: 1, limit: 15, total: 0 },
      queryParams: { page: 1, limit: 15, entity: {}, orderBy: [] },
    };
  },
  authorize: {
    deleteRecord: "delete",
  },
  mounted() {
    this.queryDictPage();
  },
  methods: {
    toCreatePage() {
      this.$router.push('')
    },
    queryBtnClick() {
      this.queryDictPage(this.queryParams);
    },
    queryDictPage() {
      dictPage(this.queryParams).then((rep) => {
        this.pageData = rep.data.data;
        this.dataSource = rep.data.data.records;
      });
    },
    deleteRecord(key) {
      this.dataSource = this.dataSource.filter((item) => item.key !== key);
    },
    toggleAdvanced() {
      this.advanced = !this.advanced;
    },
    remove() {
      this.dataSource = this.dataSource.filter(
        (item) =>
          this.selectedRows.findIndex((row) => row.key === item.key) === -1
      );
    },
    onStatusTitleClick() {
      this.$message.info("你点击了状态栏表头");
    },
    onChange() {
      this.$message.info("表格状态改变了");
    },
    addNew() {
      this.dataSource.unshift({});
    },
    handleMenuClick(e) {
      if (e.key === "delete") {
        this.remove();
      }
    },
  },
};
</script>

<style lang="less" scoped>
@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}
.card{
    margin-bottom: 24px;
  }
</style>
